<template>
    <div class="city_wrap">
        <city-head></city-head>
        <div class="city_mid">
            <city-top></city-top>
            <city-list v-bind:spell-citys="spellCitys" ></city-list>

        </div>
    </div>
    
</template>

<script>
    import CityHead from "./components/CityHead.vue"
    import CityTop from "./components/CityTop.vue"
    import CityList from './components/CityList.vue'
    export default {
        name: "City",
        components:{
            // eslint-disable-next-line vue/no-unused-components
            CityHead,
            // eslint-disable-next-line vue/no-unused-components
            CityTop,
            // eslint-disable-next-line vue/no-unused-components
            CityList
        },
        data(){
            return{
                spellCitys:[
                   {
                       spell:"A",
                       list:['鞍山','安庆','安阳','安顺','安丘','鞍山','安庆','安阳','安顺','安丘','鞍山','安庆','安阳','安顺','安丘','鞍山','安庆','安阳','安顺','安丘'
                       ,'鞍山']
                   },
                    {
                        spell:"B",
                        list:['北京','保定','北京','保定','北京','保定','北京','保定','北京','保定','北京','保定']
                    },
                    {
                        spell:"C",
                        list:['北京','保定','北京','保定','北京','保定','北京','保定','北京','保定','北京','保定']
                    },
                    {
                        spell:"D",
                        list:['北京','保定','北京','保定','北京','保定','北京','保定','北京','保定','北京','保定']
                    },
                    {
                        spell:"E",
                        list:['北京','保定','北京','保定','北京','保定','北京','保定','北京','保定','北京','保定']
                    },
                    {
                        spell:"F",
                        list:['北京','保定','北京','保定','北京','保定','北京','保定','北京','保定','北京','保定']
                    }

                ]
            }
        }
    }
</script>

<style scoped>
    html{
        -webkit-tap-highlight-color: transparent;
        height: 100%;
        min-width: 320px;
        overflow-x: hidden;
    }
    .city_wrap{
        background-color: #F5F5F5;
    }
    .city_mid{
        overflow: hidden;
        padding: 0 .2rem;
        display: block;
    }
    a{
        cursor: pointer;
    }
</style>